<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<style>
    :root {
        font-size: 8px;
    }
</style>

<body>

</body>
<script>
    // let str = 'hello word';
    // for (let i = 0; i < str.length; i++) {
    //     let span = document.createElement("span");
    //     span.style.fontSize = (i + 1) * 1 + 'rem';
    //     span.innerHTML = str[i];
    //     document.querySelector("body").append(span);
    // }
    // array 中的方法
    // let arr = [1, 2, 3, 4];
    // arr.push(1);//压栈操作  添加到最后
    // let item = arr.pop();//出队操作  最后一个出去 返回出来出队元素
    // console.table(item)
    // arr.unshift(100, 200);//入队操作  添加到头部
    // let item = arr.shift();//出栈操作 从头部删除一个元素
    // console.table(item);

    // let item = arr.slice(0, 1);
    // console.log(arr);
    // console.log(item);//slice 方法不会改变数组
    // let itemSplice = arr.splice(0, 2);
    // console.log(itemSplice);
    // console.log(arr);//splice 方法会改变数组
    // 数组移动换位置;
    // function moveArr(array, from, to) {
    //     let newArr = [...array];//解构赋值给newArr 不改变原有的array
    //     let item = newArr.splice(from, 1);
    //     newArr.splice(to, 0, ...item);
    //     return newArr;
    // }
    // console.log(moveArr(arr, 0, 3));// [2, 3, 4, 1] 实现数组的移动
    // console.log(arr);
    //合并两个数组
    // let arr1 = [6, 7, 8, 9, 10];
    // let hd = [...arr, ...arr1];
    // console.log(hd);//[1, 2, 3, 4, 6, 7, 8, 9, 10]
    //数组的查找
    // console.log(arr.includes(1));//返回Boolean类型 true false
    // console.log(arr.indexOf(1));//从前往后查找
    // console.log(arr.lastIndexOf(4));//从后往前查找
    //includes 方法的实现
    // function includes(arr, value) {
    //     for (const key in arr)
    //         if (arr[key] === value) return true;
    //     return false;
    // }
    // console.log(includes(arr, 4))
    //find与findIndex方法 遍历引用类型
    // let arr = [1, 2, 3, 4];
    // let res = arr.find(function (item) {
    //     return item === 1;//返回元素
    // });
    // console.log(res);
    // let ress = arr.findIndex(function (item) {
    //     return item === 2;//返回在数组中的下标
    // });
    // console.log(ress);
    // let arr = [{ name: 'js' }, { name: 'mysql' }, { name: 'jsp' }];
    // let res = arr.find(function (item) {
    //     return item.name === 'jsps';
    // });
    // console.log(res);//返回元素  未找到返回undefined
    // let res = arr.findIndex(function (item) {
    //     return item.name === "mysql";
    // });
    // console.log(res);//返回元素在数组中的下标

    // find方法实现过程
    // let arr = [1, 2, 3, 4];
    // function find(arr, callBack) {
    //     for (const key in arr)
    //         if (callBack(arr[key])) return arr[key];
    //     return undefined;
    // }
    // console.log(find(arr, function (item) {
    //     return item == 2;
    // }))
    // 数组的排序
    // let arr = [1, 2, 3, 4];
    // arr = arr.sort(function (a, b) {
    //     return b - a;//a-b 从小到大 b-a 从大到小
    // });
    // console.log(arr)
    //sort方法实现原理
    // let arr = [1, 2, 3, 4];
    // Array.prototype.sortFind = function (callback) {
    //     let array = [...this];
    //     for (const n in array) {
    //         for (const m in array) {
    //             //当callback 为正数 进入交换 callback为负数不进行交换从小到大
    //             //b-a>0 b>a 说明后面的数比前面的大 不用交换
    //             if (callback(array[n], array[m]) > 0) {
    //                 let item = array[n];
    //                 array[n] = array[m];
    //                 array[m] = item;
    //             }
    //         }
    //     }
    //     return array;
    // };
    // arr = arr.sortFind(function (a, b) {
    //     return b - a;
    // });
    // console.log(arr)

    //for in for of foreach 的区别
    // let arrObj = [
    //     { name: '张三', num: 3, token: '123154845132' },
    //     { name: '李四', num: 5, token: '48454845132' },
    //     { name: '王二', num: 7, token: '134845132135' },
    // ];
    // for (const key in arrObj) {
    //     console.log(key);//中的key是索引 下标
    // }
    // for (const value of arrObj) {
    //     console.log(value);//value 是arrObj的每一项
    // }
    // for (const key in arrObj) {
    //     arrObj[key].num += 10;

    // }
    // for (const value of arrObj) {
    //     value.num += 10;//arrObj也进行改变
    // }
    // console.table(arrObj);//arrObj也进行改变

    // let arr = [3, 5, 7];
    // for (let value in arr) {
    //     value += 10;//arr 不进行改变 不改变原数组
    //     //当数组中只有number类型的时候
    //     //因为value 再循环的过程中是进行了一个传值的过程
    // }
    // for (const key in arr) {
    //     arr[key] += 10;//原数组也跟着发生改变
    //     //与for of 的区别 在传递只有number类型的数组时for in 也会改变原数组
    // }
    // console.table(arr);//arrObj也进行改变
    // foreach的使用
    // let arrObj = [
    //     { name: '张三', num: 3, token: '123154845132' },
    //     { name: '李四', num: 5, token: '48454845132' },
    //     { name: '王二', num: 7, token: '134845132135' },
    // ];
    // arrObj.forEach(function (item, index, arrObj) {
    //     console.log(item, index);
    // })
    // // 数组方法 every some filter
    // let arr = [1, 2, 3, 5, 7];
    // let find = arr.every(function (item) {
    //     return item > 3; //有一个不合格就返回false 必须全部都合格才是true
    // });
    //  find = arr.some(function (item) {
    //     return item > 6;//包含一个都及格 只要有一个及格这组数据都及格
    // });
    // find ? console.log("都及格") : console.log("都不及格");
    // // filter 过滤数组中不想要的元素
    // let tempArr = arr.filter(function (item,index,arr) {
    //     return item != 2 && item != 3;//过滤掉 2，3
    //     // return true;//当为真返回的数组保留 当为假返回的数组不保留过滤掉
    // });
    // console.log(tempArr)
    // selfFilter过滤函数的实现思路
    //思路 首先挂载带array的原型链上 定义callback函数判断需要过滤的元素
    // let arrObj = [
    //     { name: '张三', num: 3, token: '123154845132' },
    //     { name: '李四', num: 5, token: '48454845132' },
    //     { name: '王二', num: 7, token: '134845132135' },
    // ];
    // Array.prototype.selfFile = function (callBack) {
    //     let tempArr = [];
    //     for (const value of this) {
    //         if (callBack(value)) tempArr.push(value);
    //     }
    //     return tempArr;
    // };
    // console.log(arr.selfFile(function (item) {
    //     return [2, 3, 5].includes(item) === false;
    // }))
    // console.log(arrObj.selfFile(function (item) {
    //     return '张三' != item.name;
    // }))
    //*****引用类型要注意 map方法
    let arrObj = [
        { name: '张三', num: 3, token: '123154845132' },
        { name: '李四', num: 5, token: '48454845132' },
        { name: '王二', num: 7, token: '134845132135' },
    ];
    // let newArr = arrObj.map(function (item) {
    //     //如引用类型 添加一个属性 课程名 kcm
    //     item.kcm = "js";
    //     return item;

    // });
    //此时原数组也发生改变 

    let newArr = arrObj.map(function (item) {
        // return { token: item.token };
        return item.token;
    });
    console.table(newArr);//新数组不会改变
    console.table(arrObj);//原数组不发生改变
    /*
    在操作引用类型(object，array)一定要注意原数组会随着新数组的改变而改变  
    在操作值类型是原数组不会发生改变
    原因是 值 在传递的过程中是传值  而引用类型是传地址 操作的是同一块内存地址
    
    */

</script>

</html>